<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入外部CSS -->
  <link rel="stylesheet" href="style.css">
  <title>之江学院官网布局</title>
</head>
<body>
  <!-- 1. 头部（含搜索框） -->
  <header class="header">
    <div class="search-box">
      <input type="text" placeholder="搜索...">
      <button>搜索</button>
    </div>
  </header>

  <!-- 2. 导航栏（至少3个） -->
  <nav class="nav">
    <ul>
      <li><a href="#">学校首页</a></li>
      <li><a href="#">学院概况</a></li>
      <li><a href="#">招生就业</a></li>
    </ul>
  </nav>

  <!-- 3. 图片展示区（铺满） -->
  <section class="banner">
    <img src="IMG_5718.jpg" alt="之江学院"
    style="width: 100%; height: auto; max-height: 400px;">
  </section>

  <!-- 4. 新闻版块（4宫格） -->
  <section class="news">
    <h2>新闻动态</h2>
    <div class="news-grid">
      <div class="news-item">新闻1</div>
      <div class="news-item">新闻2</div>
      <div class="news-item">新闻3</div>
      <div class="news-item">新闻4</div>
    </div>
  </section>

  <!-- 5. 公告版块（3条以上列表） -->
  <section class="notice">
    <h2>通知公告</h2>
    <ul>
      <li>公告1：新学期开学安排</li>
      <li>公告2：奖学金申请通知</li>
      <li>公告3：校园招聘会信息</li>
      <li>公告4：图书馆新规则</li>
    </ul>
  </section>

  <!-- 6. 主内容区（3个子版块） -->
  <main class="content">
    <section class="campus">
      <h2>校园生活</h2>
      <p>这里是校园生活内容...</p>
    </section>
    <section class="service">
      <h2>服务地方</h2>
      <p>这里是服务地方内容...</p>
    </section>
    <section class="media">
      <h2>媒体之江</h2>
      <p>这里是媒体之江内容...</p>
    </section>
  </main>

  <!-- 7. 专题网站版块（12宫格简化版） -->
  <section class="subject">
    <h2>专题网站</h2>
    <div class="subject-grid">
      <div class="subject-item">专题1</div>
      <div class="subject-item">专题2</div>
      <div class="subject-item">专题3</div>
      <div class="subject-item">专题4</div>
      <div class="subject-item">专题5</div>
      <div class="subject-item">专题6</div>
      <div class="subject-item">专题7</div>
      <div class="subject-item">专题8</div>
      <div class="subject-item">专题9</div>
      <div class="subject-item">专题10</div>
      <div class="subject-item">专题11</div>
      <div class="subject-item">专题12</div>
    </div>
  </section>

  <!-- 8. 页脚（版权+备案） -->
  <footer class="footer">
    <p>版权所有 © 之江学院</p>
    <p>备案号：浙ICP备XXXXXX号</p>
  </footer>
</body>
</html>